<template>
  <div class="app-container">
    <!-- 添加或修改租赁合同对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="20">
            <fieldset>
              <legend>基本信息</legend>
            <el-col :span="8" :xs="24">
                <el-form-item label="甲方" prop="deptId">
                <treeselect
                  v-model="form.deptId"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  placeholder="选择所属机构"
                  @select="selectDepart"
                />
              </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="甲方联系人" prop="firstRelation">
                    <el-input v-model="form.firstRelation" placeholder="请输入甲方联系人" :disabled="disabled"/>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="甲方手机号码" prop="firstPhone">
                    <el-input v-model="form.firstPhone" placeholder="请输入甲方手机号码" :disabled="disabled"/>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="乙方" prop="partyDept">
                    <el-input v-model="form.partyDept" placeholder="请输入乙方" :disabled="disabled"/>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="租户类型" prop="leaseType">
                  <el-select v-model="form.leaseType" placeholder="请选择租户类型" :disabled="disabled">
                    <el-option
                      v-for="item in dict.custom_type"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
                    <el-col :span="8" :xs="24" v-if="form.leaseType=='002'">
                <el-form-item label="法人代表" prop="legalPerson">
                    <el-input v-model="form.legalPerson" placeholder="请输入法人代表" :disabled="disabled"/>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24" v-if="form.leaseType=='002'">
                <el-form-item label="固定电话" prop="fixedPhone">
                    <el-input v-model="form.fixedPhone" placeholder="请输入固定电话" :disabled="disabled"/>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="联系人" prop="partyPerson">
                  <el-select v-model="form.partyPerson" placeholder="请选择联系人" :disabled="disabled">
                    <el-option
                      v-for="item in customInfoOptions"
                      :key="item.customId"
                      :label="item.customName"
                      :value="item.customId"
                    ></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="手机号码" prop="partyPhone">
                    <el-input v-model="form.partyPhone" placeholder="请输入手机号码" :disabled="disabled"/>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="联系地址" prop="partyAdd">
                    <el-input v-model="form.partyAdd" placeholder="请输入联系地址" :disabled="disabled"/>
                </el-form-item>
            </el-col>
            </fieldset>
            <fieldset>
              <legend>房屋信息</legend>
                <el-col :span="8" :xs="24">
                <el-form-item label="小区" prop="communityId">
                  <el-select v-model="form.communityId" placeholder="请选择小区" :disabled="disabled">
                    <el-option
                      v-for="item in communityOptions"
                      :key="item.id"
                      :label="item.communityName"
                      :value="item.id"
                    ></el-option>
                  </el-select>

                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item label="所属楼栋" prop="floorId">
                    <el-select v-model="form.floorId" placeholder="请选择所属楼栋" @change="getUnitList" :disabled=disabled>
                      <el-option
                        v-for="item in floorOptions"
                        :key="item.id"
                        :label="item.floorName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item label="所属单元" prop="unitId">
                    <el-select v-model="form.unitId" placeholder="请选择所属单元" @change="getRoomListData" :disabled=disabled>
                      <el-option
                        v-for="item in unitOptions"
                        :key="item.id"
                        :label="item.unitName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item label="所属房屋" prop="roomId">
                    <el-select v-model="form.roomId" placeholder="请选择所属房屋" @change="changeRoom" :disabled=disabled>
                      <el-option
                        v-for="item in roomOptions"
                        :key="item.id"
                        :label="item.roomNum"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
            </el-col>
            </fieldset>
            <fieldset>
              <legend>租赁信息</legend>
                <el-col :span="8" :xs="24">
                <el-form-item label="收费项目" prop="chargeItemId">
                  <el-select v-model="form.chargeItemId" placeholder="请选择收费项目" disabled>
                    <el-option
                      v-for="item in charTimeOptions"
                      :key="item.chargeId"
                      :label="item.chargeName"
                      :value="item.chargeId"
                    ></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="费用标准" prop="costMoney">
                  <el-input-number v-model="form.costMoney" :precision="2" :step="0.1" :disabled="disabled"></el-input-number>    元
                </el-form-item>
            </el-col>
                <el-col :span="8" :xs="24">
                <el-form-item label="收费周期" prop="chargePeriod">
                  <el-input-number v-model="form.chargePeriod"  :min="1" :max="12" label="请选择收费周期" :disabled="disabled" />    月
                </el-form-item>
            </el-col>
                    <el-col :span="8" :xs="24">
                <el-form-item label="首批收款日期" prop="forPayeeTime">
                  <el-date-picker clearable size="small" :disabled="disabled"
                    v-model="form.forPayeeTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择首批收款日期">
                  </el-date-picker>
                </el-form-item>
            </el-col>
            </fieldset>
                    <el-col :span="24" :xs="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :disabled="disabled"/>
                </el-form-item>
            </el-col>
              </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLeasePact , addLeasePact, updateLeasePact } from "@/api/payfee/leasePact";
import {listDept} from "@/api/system/dept";
import {listCommunity} from "@/api/property/community";
import { roomMixin } from "@/views/property/houseMange/roomMixin.js"
import {listItem} from "@/api/payfee/item";
import CustomAutocomplete from "@/views/components/filterable/CustomAutocomplete"
import {listCustomInfo} from "@/api/waitress/customInfo";
export default {
  name: "LeasePactFrom",
  mixins:[ roomMixin ],
  dicts: [   'custom_type',  'month_type',   ],
  components:{CustomAutocomplete},
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否禁用
      disabled: false,
      // 表单参数
      form: {},
      deptOptions: [],
      communityOptions:[],
      charTimeOptions:[],
      customInfoOptions:[],
      // 表单校验
      rules: {
        leaseType: [
          { required: true, message: "租户类型不能为空", trigger: "change" }
        ],
        partyPerson: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        partyPhone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" }
        ],
        communityId: [
          { required: true, message: "小区ID不能为空", trigger: "blur" }
        ],
        floorId: [
          { required: true, message: "楼栋ID不能为空", trigger: "blur" }
        ],
        unitId: [
          { required: true, message: "单元id不能为空", trigger: "blur" }
        ],
        roomId: [
          { required: true, message: "房屋id不能为空", trigger: "blur" }
        ],
        chargeItemId: [
          { required: true, message: "收费项目ID不能为空", trigger: "blur" }
        ],
        costMoney: [
          { required: true, message: "费用标准不能为空", trigger: "blur" }
        ],
        chargePeriod: [
          { required: true, message: "收费周期不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getDeptList();
    listCommunity().then(res=>{
      this.communityOptions = res.rows;
    })
    listItem().then(res=>{
      this.charTimeOptions = res.rows;
    })

  },
  watch:{
    'form.leaseType'(v){
      listCustomInfo({customType:this.form.leaseType}).then(res=>{
        this.customInfoOptions = res.rows;
      })
    },
    'form.communityId'(v){
      listCustomInfo({communityId:this.form.communityId}).then(res=>{
        this.customInfoOptions = res.rows;
      })
    }
  },
  methods: {
    getDeptList() {
      listDept().then(response => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
    },
    show(option){
      this.reset();
      this.disabled = option.type == 'VIEW'
      if(option.type=='ADD'){
          this.open = true;
          this.title = "新增租赁合同";
          this.initHouseInfo(option.currentNode)
        this.form.forPayeeTime = new Date();
      }else if(option.type == 'UPDATE' || option.type == 'VIEW'){
          getLeasePact(option.id).then(response => {
              this.form = response.data;

              if(option.type == 'VIEW'){
                  this.title = "查看租赁合同";
              }else{
                  this.title = "修改租赁合同";
              }
              this.open = true;
          });
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.$emit("cancel")
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        pactNo: null,
        deptId: null,
        firstRelation: null,
        firstPhone: null,
        partyDept: null,
        leaseType: null,
        legalPerson: null,
        fixedPhone: null,
        partyPerson: null,
        partyPhone: null,
        partyAdd: null,
        communityId: null,
        floorId: null,
        unitId: null,
        roomId: null,
        chargeItemId: '501',
        costMoney: null,
        chargePeriod: null,
        forPayeeTime: null,
        ancestors: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    selectDepart(node, instanceId) {
      this.form.deptName = node.deptName;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateLeasePact(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.cancel()
            });
          } else {
            addLeasePact(this.form).then(response => {
              this.msgSuccess("新增成功");
                this.cancel()
            });
          }
        }
      });
    },

  }
};
</script>
